<template>
	<div class="checkout">
		<h3 class="PayTitle">提示：付款金额要与显示的金额一致，否则后果自负</h3>

		<template v-if="pay">
			<div class="PayAmount">
				<span>￥</span>
				<span>{{ pay.price }}元</span>
			</div>

			<div class="PayCode">
				<img src="/assets/images/pay/qrcode_timeout.png" v-if="expired" alt="" />
				<template v-else>
					<img v-if="type == 'wx'" :src="pay.wxcode" />
					<img v-else :src="pay.zfbcode" />
				</template>
			</div>

			<div class="PayInfo">
				<div class="name">订单名称：{{ pay.name }}</div>
				<div class="code">订单号：{{ pay.code }}</div>
				<div class="box">
					<span class="tip">订单支付有效期</span>
					<span class="sec">{{ time }} 秒</span>
				</div>
			</div>
		</template>
		<template v-else>
			<van-loading size="24px" vertical>加载中...</van-loading>
		</template>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');

const money = ref(proxy.$route.query.money);
const type = ref(proxy.$route.query.type ?? 'wx');

if (money.value && /^\d+(\.\d+)?$/.test(money.value)) {
	money.value = Number(money.value);
} else {
	proxy.$fail('错误的金额');
	proxy.$router.back();
}

const pay = ref(null);
const expired = ref(false);
const time = ref(180);

// 充值请求
const request = async () => {
	//组装数据
	const data = {
		busid: business.id,
		money: money.value,
		type: type.value,
	};

	const res = await proxy.$POST({
		url: '/business/pay',
		params: data,
	});

	if (res.code == 0) {
		proxy.$fail(res.msg);
		return false;
	}

	pay.value = res.data;

	// 开始倒计时
	countdown();
};

// 查询支付结果
const query = async () => {
	if (time <= 0) return;

	const data = {
		busid: business.id,
		payid: pay.value.id,
	};

	const res = await proxy.$POST({
		url: '/business/query',
		params: data,
	});

	const status = res.data.status ? res.data.status : 0;

	if (status == '1') {
		clearInterval(timer); // 清除定时器

		proxy.$success({
			title: '支付提醒',
			message: '支付成功',
			duration: 3000,
			onClose: () => {
				proxy.$router.push('/business/pay');
			},
		});
	}
};

let timer;
const countdown = () => {
	clearInterval(timer);

	timer = setInterval(() => {
		if (time.value <= 0) {
			clearInterval(timer);
			expired.value = true;

			return;
		}

		query();

		time.value--;
	}, 1000);
};

onBeforeUnmount(() => clearInterval(timer));

request();
</script>

<style scoped lang="scss">
.checkout {
	.PayTitle {
		text-align: center;
		color: red;
		font-size: 1.3em;
		margin-top: 2em;
		margin-bottom: 1em;
	}
	.PayAmount {
		text-align: center;
		margin-bottom: 1em;
	}

	.PayAmount span:first-child {
		font-size: 1.6em;
	}

	.PayAmount span:last-child {
		font-size: 2.4em;
	}

	.PayCode {
		width: 70%;
		margin: 0 auto;
	}

	.PayCode img {
		width: 100%;
	}

	.PayInfo {
		text-align: center;
		color: #000;
		font-size: 1.2em;
		font-weight: bold;
	}

	.PayInfo .box {
		margin-top: 1em;
	}

	.PayInfo .box span {
		background: #3ec742;
		color: #fff;
		line-height: 25px;
		font-size: 15px;
		font-family: Arial;
		padding: 0 10px;
		margin-right: 10px;
		border-radius: 5px;
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	}
}
</style>
